<!--
 * @Author: mayijun
 * @Date: 2022-04-20 16:47:00
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-06-02 17:34:22
-->
<template>
  <el-sub-menu
    v-if="item && item.childrens && item.childrens.length"
    :index="navIndex"
  >
    <template #title>
      <CustomIconSvg :name="item.resourceIcon" />
      <span class="menu-title">{{ item.resourceName }}</span>
    </template>
    <nav-item
      v-for="i in item.childrens"
      :item="i"
      :nav-index="i.resourceLink"
      :key="i"
    ></nav-item>
  </el-sub-menu>
  <el-menu-item v-else :index="item.resourceLink">
    <CustomIconSvg :name="item.resourceIcon" v-if="item.resourceIcon" />
    <template #title>
      <span :class="{ 'sub-item-title': !item.resourceIcon }">{{
        item.resourceName
      }}</span>
    </template>
  </el-menu-item>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CustomIconSvg from '@/components/customicon/custom-icon';
export default defineComponent({
  components: { CustomIconSvg }
});
</script>
<script lang="ts" setup>
import { ISelectPermission } from '@/store/permission';

const props = withDefaults(
  defineProps<{
    item: ISelectPermission;
    navIndex: string;
  }>(),
  {
    item: () => ({
      icon: '',
      resourceName: '',
      resourceLink: '',
      default: false,
      childrens: []
    }),
    navIndex: ''
  }
);
</script>
<style lang="scss" scoped>
.el-sub-menu__title .custom-icon,
.el-menu-item .custom-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 14px;
  .menu-title {
    font-size: 14px;
  }
}
ul.el-menu {
  > li.el-menu-item {
    .sub-item-title {
      padding-left: 14px;
    }
  }
}
</style>
